<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>法币交易</title>
    <link rel="stylesheet" href="../assets/css/mui.min.css">
    <!-- 自定义的公共样式表 -->
    <link rel="stylesheet" href="../assets/css/lib.common.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="../assets/css/app.css">
    <link rel="stylesheet" href="../assets/css/animate3.1.5.css">
    <script src="../assets/js/mui.min.js"></script>
    <!-- 点击复制文本 -->
    <script src="../assets/js/clipboard.min.js"></script>
    <!-- 自定义的js脚本 -->
    <script src="../assets/js/lib.common.js"></script>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    [endif]-->
</head>
<body class="bg-white">


<!-- 购买弹框start -->
<div class="lib-aside lib-aside-down shadow2 animated" style="width: 80%;">
    <div class="mui-row">
        <div class="mui-col-xs-11 mui-col-xs-11">
            <h4 class="black p_x10 line30 font14">购买</h4>
        </div>
        <div class="mui-col-xs-1 mui-col-sm-1">
            <i class="mui-icon mui-icon-closeempty f_r text-danger p_x5 line30" onclick="closeSide()"></i>
        </div>
    </div>
    <form id="buyForm" action="">
        <input type="hidden" name="id" id="goodId" value="0">
        <input type="hidden" id="priceValue" value="0">
        <!-- 单价start -->
        <div class="mui-row line40">
            <div class="mui-col-sm-3 mui-col-xs-3 dark a_c">
                单价：
            </div>
            <div class="mui-col-sm-8 mui-col-xs-8 text-danger">
                <span id="price">7.1 CNY</span>
            </div>

        </div>
        <!-- 单价end -->

        <!-- 数量start -->
        <div class="mui-row line40">
            <div class="mui-col-sm-3 mui-col-xs-3 dark a_c">
                数量：
            </div>
            <div class="mui-col-sm-8 mui-col-xs-8 text-danger">
                <div class="mui-numbox w100" data-numbox-min='0' data-numbox-max='100'>
                    <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                    <input name="nums" id="nums" class="mui-numbox-input" type="number"/>
                    <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                </div>
            </div>
        </div>
        <!-- 数量end -->

        <!-- 总价start -->
        <div class="mui-row line40">
            <div class="mui-col-sm-3 mui-col-xs-3 dark a_c">
                总价：
            </div>
            <div class="mui-col-sm-8 mui-col-xs-8 text-danger">
                <span id="total">7.1 CNY</span>
            </div>
        </div>
        <!-- 总价end -->

        <!-- 总价start -->
        <div class="mui-row line40 p_y20">
            <div class="mui-col-sm-6 mui-col-xs-6 p_x10">
                <button type="button" class="mui-btn mui-btn-grey w100" onclick="closeSide()">取消</button>
            </div>
            <div class="mui-col-sm-6 mui-col-xs-6 p_x10">
                <button type="button" class="mui-btn mui-btn-danger w100" onclick="__submit('#buyForm')">下单</button>
            </div>
        </div>
        <!-- 总价end -->
    </form>
</div>
<!-- 购买弹框end -->

<!-- 头部状态栏start -->
<header class="mui-bar mui-bar-nav">
    <a url="../个人中心.html" class="mui-icon mui-icon-back dark"></a>
    <h1 class="mui-title dark bold">
        法币交易
    </h1>
</header>
<!-- 头部状态栏end -->

<div class="mui-row hangqing-nav">
    <div class="mui-col-xs-12 mui-col-sm-12 p_x10 p_y15 fabi-nav-content">
        <a href="#" class="active">购买</a>
        <a href="#">出售</a>
    </div>

</div>
<div class="mui-row fabi-content">
    <div class="mui-col-xs-12 mui-col-sm-12 p_t15">
        <div class="mui-slider">
            <div class="mui-scroll-wrapper mui-segmented-control mui-segmented-control-inverted">
                <a class="mui-control-item mui-active" href="#item1">
                    USDT
                </a>
                <a class="mui-control-item" href="#item2">
                    BTC
                </a>
                <a class="mui-control-item" href="#item3">
                    ETH
                </a>
            </div>
            <div class="mui-slider-group p_y10">

                <!--USDT-->
                <div id="item1" class="mui-slider-item mui-control-content mui-active">
                    <div class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                            <ul class="mui-table-view">
                                <li class="mui-table-view-cell mui-media">
                                    <div class="mui-row">
                                        <div class="mui-col-sm-12 mui-col-xs-12">
                                            <img class="mui-media-object mui-pull-left"
                                                 src="../assets/image/info-icon/1.png">
                                            <!-- 可以放置单个文字头像如下 -->
                                            <!--<span class="mui-media-object mui-pull-left">木</span>-->
                                            <div class="mui-media-body p_b10">
                                                幸福
                                                <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                                            </div>
                                        </div>
                                        <!-- 第一组商品属性start -->
                                        <div class="mui-col-sm-3 mui-col-xs-3 dark a_c">
                                            数量：
                                        </div>
                                        <div class="mui-col-sm-8 mui-col-xs-8 black">
                                            999000 USDT
                                        </div>
                                        <!-- 第一组商品属性end -->

                                        <div class="mui-col-sm-3 mui-col-xs-3 dark a_c">
                                            单价：
                                        </div>
                                        <div class="mui-col-sm-8 mui-col-xs-8 black">
                                            CNY 7.1
                                        </div>

                                        <div class="mui-col-sm-3 mui-col-xs-3 dark a_c">
                                            限额：
                                        </div>
                                        <div class="mui-col-sm-8 mui-col-xs-8 black">
                                            710.0000~709290.0000 CNY
                                        </div>

                                        <div class="mui-col-sm-12 mui-col-xs-12">
                                            <button type="button" class="mui-btn mui-btn-primary f_r"
                                                    onclick="buy({id:1,price:123.01})">购买
                                            </button>
                                        </div>
                                    </div>
                                </li>
                                <li class="mui-table-view-cell mui-media shadow2">
                                    <div class="mui-row line25">
                                        <div class="mui-col-sm-12 mui-col-xs-12">
                                            <span class="mui-media-object mui-pull-left">木</span>
                                            <!-- 可以放置图像作为头像如下 -->
                                            <!--<img class="mui-media-object mui-pull-left"-->
                                            <!--src="../assets/image/info-icon/1.png">-->

                                            <div class="mui-media-body">
                                                <span>木屋</span>
                                                <p class='mui-ellipsis'>商品说明等一些小东西</p>
                                            </div>
                                        </div>

                                        <!-- 第一组商品属性start -->
                                        <div class="mui-col-sm-3 mui-col-xs-3 dark a_c">
                                            数量：
                                        </div>
                                        <div class="mui-col-sm-8 mui-col-xs-8 black">
                                            999000 USDT
                                        </div>
                                        <!-- 第一组商品属性end -->

                                        <div class="mui-col-sm-3 mui-col-xs-3 dark a_c">
                                            单价：
                                        </div>
                                        <div class="mui-col-sm-8 mui-col-xs-8 black">
                                            CNY 7.1
                                        </div>

                                        <div class="mui-col-sm-3 mui-col-xs-3 dark a_c">
                                            限额：
                                        </div>
                                        <div class="mui-col-sm-8 mui-col-xs-8 black">
                                            710.0000~709290.0000 CNY
                                        </div>
                                        <div class="mui-col-sm-12 mui-col-xs-12">
                                            <button type="button" class="mui-btn mui-btn-primary f_r"
                                                    onclick="buy({id:2,price:7.23})">购买
                                            </button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!--BTC-->
                <div id="item2" class="mui-slider-item mui-control-content">
                    <div class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                            <p class="no-data">暂无数据</p>
                        </div>
                    </div>
                </div>


                <!--ETH-->
                <div id="item3" class="mui-slider-item mui-control-content">
                    <div class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                            <p class="no-data">暂无数据</p>
                        </div>
                    </div>
                </div>


            </div>

            <div class="modal-frame bg-white aside-down animated">
                <div class=" mui-row">
                    <div class="mui-col-sm-12 mui-col-xs-12 a_r p_x10">
                        <span class="mui-icon mui-icon-closeempty text-danger bold"
                              onclick="closeSide('.modal-frame')"></span>
                    </div>
                </div>
                <div class=" mui-row">
                    <h4 class="mui-col-sm-12 mui-col-xs-12 a_c line40 p_x5 mui-ellipsis">
                        标题标题
                    </h4>
                </div>
                <form id="myBuyForm" action="">
                    <input type="hidden" name="id" id="myGoodId" value="0">
                    <input type="hidden" id="myPriceValue" value="0">
                    <!-- 单价start -->
                    <div class="mui-row line40">
                        <div class="mui-col-sm-3 mui-col-xs-3 dark a_c">
                            单价：
                        </div>
                        <div class="mui-col-sm-8 mui-col-xs-8 text-danger">
                            <span id="myPrice">7.1 CNY</span>
                        </div>

                    </div>
                    <!-- 单价end -->

                    <!-- 数量start -->
                    <div class="mui-row line40">
                        <div class="mui-col-sm-3 mui-col-xs-3 dark a_c">
                            数量：
                        </div>
                        <div class="mui-col-sm-8 mui-col-xs-8 text-danger">
                            <div class="mui-numbox w100" data-numbox-min='0' data-numbox-max='100'>
                                <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                                <input name="nums" id="myNums" class="mui-numbox-input" type="number"/>
                                <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                            </div>
                        </div>
                    </div>
                    <!-- 数量end -->

                    <!-- 限额start -->
                    <div class="mui-row line40">
                        <div class="mui-col-sm-3 mui-col-xs-3 dark a_c">
                            限额：
                        </div>
                        <div class="mui-col-sm-8 mui-col-xs-8 text-danger">
                            <div class="mui-numbox w100" data-numbox-min='0' data-numbox-max='100'>
                                <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                                <input name="nums" id="myQuota" class="mui-numbox-input" type="number"/>
                                <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                            </div>
                        </div>
                    </div>
                    <!-- 限额end -->

                    <!-- 总价start -->
                    <div class="mui-row line40">
                        <div class="mui-col-sm-3 mui-col-xs-3 dark a_c">
                            总价：
                        </div>
                        <div class="mui-col-sm-8 mui-col-xs-8 text-danger">
                            <span id="myTotal">7.1 CNY</span>
                        </div>
                    </div>
                    <!-- 总价end -->

                    <!-- 总价start -->
                    <div class="mui-row line40 p_y25">
                        <div class="mui-col-sm-12 mui-col-xs-12 p_x10">
                            <button type="button" class="mui-btn btn-green w100 line30"
                                    onclick="__submit('#myBuyForm')">购买
                            </button>
                            <!--<button type="button" class="mui-btn mui-btn-danger w100 line30"-->
                                    <!--onclick="__submit('#myBuyForm')">出售-->
                            <!--</button>-->
                        </div>
                    </div>
                    <!-- 总价end -->
                </form>

            </div>
        </div>

    </div>

</div>

<div class="mui-col-xs-12 mui-col-sm-12">
    <div class="app-footer">
        <!-- 防止底部导航挡住内容的区块（勿删） -->
    </div>
</div>

<div class="mui-row footer-toolbar bg-white p_y5" style="z-index: 2">
    <div class="mui-col-xs-6 mui-col-sm-6 dark a_c">
        <button type="button" onclick="myBuy({id:1,price:123.01})" class="mui-btn btn-green btn-width line30">我要买</button>
    </div>
    <div class="mui-col-xs-6 mui-col-sm-6 dark a_c">
        <span onclick="myBuy({id:1,price:123.01})" class="mui-btn mui-btn-danger btn-width line30">我要卖</span>
    </div>
</div>
</body>

</html>
<script>

    // 每项的“购买”、“卖出”按钮
    // (小单框)点击购买时设置弹出框的一些属性
    function buy(data) {
        // 设置表单ID
        document.getElementById('goodId').value = data.id;
        document.getElementById('priceValue').value = data.price;
        // 设置单价
        document.getElementById('price').innerText = data.price + ' CNY';
        document.getElementById('total').innerText = '0.00 CNY';
        // 显示弹框
        openSide();
    }

    // (小单框)当数量变化是计算总价
    mui(document).on('change', '#nums', function (e) {
        let priceValue = document.getElementById('priceValue').value;
        let total = calculateTotalAmount(priceValue, e.target.value)
        document.getElementById('total').innerText = total + ' CNY';
    })


    // 底部按钮“我要买”、“我要卖”按钮
    // (大单框)点击购买时设置弹出框的一些属性
    function myBuy(data) {
        // 设置表单ID
        document.getElementById('myGoodId').value = data.id;
        document.getElementById('myPriceValue').value = data.price;
        // 设置单价
        document.getElementById('myPrice').innerText = data.price + ' CNY';
        document.getElementById('myTotal').innerText = '0.00 CNY';
        // 显示弹框
        openSide('.modal-frame');
    }
    // (大单框)当数量变化是计算总价
    mui(document).on('change', '#myNums', function (e) {
        let priceValue = document.getElementById('priceValue').value;
        let total = calculateTotalAmount(priceValue, e.target.value)
        document.getElementById('myTotal').innerText = total + ' CNY';
    })

    function calculateTotalAmount(price, nums) {
        price = Number(price);
        nums = parseInt(nums);
        if (isNaN(price)) {
            mui.toast('单价有误');
            return;
        }
        if (isNaN(nums) || nums <= 0) {
            mui.toast('数量有误');
            return;
        }
        // js的浮点数精确计算（floatMul()来源：lib.common.js）
        let total = floatMul(price, nums);
        return isNaN(total) ? '0.00' : total.toString();
    }
</script>